<template>
  <!-- 题目详情弹出层 -->
  <el-dialog title="题目预览" :visible="isShow" @close="btnCancel">
    <el-row>
      <el-col :span="6"
        >【题型】：{{ randomsDetailed.questionType | questionType }}</el-col
      >
      <el-col :span="6">【编号】：{{ randomsDetailed.id }}</el-col>
      <el-col :span="6"
        >【难度】：{{ randomsDetailed.difficulty | difficulty }}</el-col
      >
      <el-col :span="6">【标签】：{{ randomsDetailed.tags }}</el-col>
    </el-row>
    <el-row>
      <el-col class="col-top" :span="6"
        >【学科】：{{ randomsDetailed.subjectName }}</el-col
      >
      <el-col class="col-top" :span="6"
        >【目录】：{{ randomsDetailed.directoryName }}</el-col
      >
      <el-col class="col-top" :span="6"
        >【方向】：{{ randomsDetailed.direction }}</el-col
      >
    </el-row>

    <div class="line"></div>
    <div>【题干】：</div>
    <div style="color: #409eff; margin: 10px 0">
      {{ randomsDetailed.question | removeP }}
    </div>

    <!-- 单选 -->
    <div v-if="randomsDetailed.questionType === '1'">
      <div>单选题选项：(以下选中的选项为正确答案)</div>
      <div
        style="display: flex; margin-top: 10px"
        v-for="(item, index) in randomsDetailed.options"
        :key="item.id"
      >
        <input type="radio" :value="index" v-model="valueRadio" />
        <span style="margin-left: 5px" for=""
          >{{ item.code }} {{ item.title }}</span
        >
      </div>
    </div>

    <!-- 多选 -->
    <div v-if="randomsDetailed.questionType === '2'">
      <div>多选题选项：(以下选中的选项为正确答案)</div>
      <div
        style="display: flex; margin-top: 10px"
        v-for="(item, index) in randomsDetailed.options"
        :key="item.id"
      >
        <input type="checkbox" :value="index" v-model="valueCheckbox" />
        <span style="margin-left: 5px" for=""
          >{{ item.code }} {{ item.title }}</span
        >
      </div>
    </div>

    <!-- 简答 -->
    <div v-else></div>

    <div class="line" style="margin: 5px"></div>

    <div>
      【参考答案】：
      <el-button type="danger" @click="shouVideo">视频答案预览</el-button>
      <div style="margin-top: 20px">
        <video
          :src="randomsDetailed.videoURL"
          controls
          width="50%"
          height="50%"
          v-if="checkVideoFun"
        ></video>
      </div>
    </div>
    <div class="line" style="margin: 5px 0 20px 0"></div>

    <div>【答案解析】：{{ randomsDetailed.answer | removeP }}</div>

    <div class="line"></div>

    <div style="margin-bottom: 15px">
      【题目备注】：{{ randomsDetailed.remarks }}
    </div>

    <el-row type="flex" justify="center">
      <el-button type="primary" @click="btnCancel">关闭</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { getRandomsDetails } from '@/api/hmmm/randoms.js'
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  name: 'RandomsPreview',
  props: {
    isShow: {
      type: Boolean,
      required: true
    }
  },
  filters: {
    removeP (value) {
      if (value !== undefined) {
        value = value.replace('<p>', '')
        value = value.replace('</p>', '')
      }
      return value
    },
    questionType (value) {
      if (value !== undefined) {
        return questionType.find(item => item.value === parseInt(value)).label
      }
      return value
    },
    difficulty (value) {
      if (value !== undefined) {
        console.log(value)
        return difficulty.find(item => item.value === parseInt(value)).label
      }
      return value
    }
  },
  computed: {
    radioAndCheckbox () {
      if (this.randomsDetailed.questionType === '1') {
        return 'radio'
      } else if (this.randomsDetailed.questionType === '2') {
        return 'checkbox'
      }
      return ''
    }
  },
  components: {},
  data () {
    return {
      randomsDetailed: {},
      valueRadio: '',
      valueCheckbox: [],
      checkVideoFun: false
    }
  },
  methods: {
    async seeCodeChild (id) {
      const { data } = await getRandomsDetails({ id })
      this.randomsDetailed = data
      console.log(data)
    },
    btnCancel () {
      this.$emit('update:isShow', false)
      this.checkVideoFun = false
    },
    shouVideo () {
      this.checkVideoFun = !this.checkVideoFun
    }

  }
}
</script>

<style lang="scss" scoped>
.col-top {
  margin: 15px 0;
}
// ::v-deep .el-dialog__body {
//   //   padding: 0;
// }
.el-row {
  height: 40px;
}
.line {
  height: 2px;
  margin: 13px 0px;
  background-color: #eee;
}
span {
  font-size: 12px;
  font-weight: normal;
}
</style>
